#{extends 'template.html'/}


<body style="color:#D9E6F7; margin: 0px;padding: 0px; font-style: courier" >

  <div style="width: 100%;height: 100%">


	#{include 'main.html'/}
	<div  style="float: left; width: 100%;height: 80%">

	 #{include 'panelperfil.html'/}

		<div class="bod" id="largeData" style="float: left;width: 70%;">
  
  
 		<h3>Titulo do Projeto que deseja iniciar</h3>

  
   	<form id="formpro">
    	<input class="form-control" type="text" id="inp" name="pro_titulo"/>
    	
	</form> 
	
<script type="text/javascript">
  $("#panel-body").append("<center> <a href='' style='text-decoration:none;color:#279590;'> Projetos(${qtdProjetos})</a></center>");
    $(function() {
        $.get("projetos.json", function(data) {
            $.each(data, function(index, item) {
                $("#panel-body").append("<center> <div id='myDiv'><a href='#' onclick='doSomething();' >" + item.pro_titulo + "</a></div></center>");
                   
            });
           $("#myDiv").contextMenu({ menu: 'myMenu', leftButton: true });
        });
        
        
    });
  
  $('#formpro').submit(function() {
  
  var createAction = #{jsAction @addProjeto(':pro_titulo') /}

$.post(createAction({pro_titulo: $('#inp').val()}), function(index, item) {
$.get("projetos.json", function(index, item) {
           
                $("#panel-body").append("<center> <div id='myDiv'><form id='myForm'><a href='' >" + item.pro_titulo + "</a></form></div></center>");
                   $("#myDiv").contextMenu({ menu: 'myMenu', leftButton: true });
        });

});
$('#inp').val('');
return false;
 });
   
  $(document).bind("contextmenu",function(e){
			    return false;
}); 
       
     function doSomething() {
     $("#largeData").html("<ul class='nav nav-tabs' id='myTab'> <li class='active'><a href='#home'>Capitulos</a></li> <li><a href='#profile'>Personagens</a></li> <li><a href='#messages'>Notas</a></li> <li><a href='#settings'>Locais</a></li></ul><div class='tab-content'><div class='tab-pane active' id='home'>aqui...</div><div class='tab-pane' id='profile'>dois...</div><div class='tab-pane' id='messages'>...</div> <div class='tab-pane' id='settings'>...</div></div>");
   $('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
   $("#profile").contextMenu({ menu: 'myMenu', leftButton: true });
})
   return false;
}
    
 
</script>

</div>

 #{include 'busca.html'/}
       

     
  
 </div>

<ul id="myMenu" class="contextMenu">
            <li class="edit"><a href="#editar">Editar</a></li>
            <li class="cut separator"><a href="#recortar">Recortar</a></li>
            <li class="copy"><a href="#copiar">Copiar</a></li>
            <li class="paste"><a href="#colar">Colar</a></li>
            <li class="delete"><a href="#deletar">Deletar</a></li>
            <li class="quit separator"><a href="#sair">Sair</a></li>
        </ul>
</body>

